<template>
  <div class="right-block2">
    <div class="data-title">人员统计</div>
    <div class="personal-int clearfix">
      <div class="int-left">
        <p class="num">{{ userCount }}</p>
        <p class="txt">总人数</p>
      </div>
      <div class="int-right" style="margin-top: -20px">
        <div style="width: 300px; height: 160px">
          <p-echarts :option="option" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postHandle } from '@/api'
import PEcharts from '@/components/charts/pEcharts'
export default {
  name: 'PersonnelStatistics',
  components: { PEcharts },
  props: {
    newSpaceId: {
      type: String
    }
  },
  data() {
    return {
      xname: [],
      yData: [],
      userCount: 0
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    option() {
      return {
        tooltip: {},
        color: ['#5CD5C8'],
        grid: {
          top: 0,
          left: '3%',
          right: '8%',
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false,
            textStyle: {
              color: '#ffffff'
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'category',
          data: this.xname
        },
        series: [
          {
            type: 'bar',
            barWidth: '10',
            barCategoryGap: '100%',
            barGap: '80%',
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            data: this.yData
          }
        ]
      }
    }
  },
  watch: {
    newSpaceId(v) {
      if (v) this.getCountList()
    }
  },
  created() {
    this.getCountList()
  },
  methods: {
    getCountList() {
      const req = {
        d: {
          filters: [
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }
          ],
          page: {
            p: 1,
            ps: 9999
          }
        }
      }
      postHandle('/api/v1/welder-sbtx-second/user-count-info', req).then(
        (response) => {
          let data = response.result
          this.xname = []
          this.yData = []
          this.userCount = 0
          data.forEach((item) => {
            this.xname.push(item.userTypeName)
            this.yData.push(item.userTypeCount)
            this.userCount += item.userTypeCount
          })
        }
      )
    }
  }
}
</script>

<style scoped>
</style>
